<template>
	<view class="center">
		<hea-ders :title='title'>
			<image slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
				<image slot='Lright' src="@/static/images/s36.png" mode="widthFix"></image>
				<image slot='Rright' src="@/static/images/tb_icon.png" mode="widthFix"></image>
		</hea-ders>
		<!-- <view class="tit"></view>
		<view class="title">
			<image src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<text>拜访计划</text>
			<view class="ima">
				<image src="@/static/images/路径 731.png" mode="widthFix"></image>
				<image src="@/static/images/tb_icon.png" mode="widthFix"></image>
			</view> -->
		<!-- </view> -->
		<view class="seach">
			<image src="@/static/images/search.png" mode="widthFix"></image>
			<input type="text" value="" placeholder-style="font-size:24rpx;" placeholder="客户名称" />
		</view>

		<view class="uni-list-cell-db">
			<image src="@/static/shopImage/A.png" mode="widthFix"></image>
			<picker class="date" mode="date" :value="date"  @change="bindDateChange">
				<view class="uni-input">{{date}}</view>
			</picker>
			<view class="rights">
				<image class="sjian" src="@/static/images/s4.png" mode="widthFix"></image>
				<image src="@/static/images/arrow_right.png" mode="widthFix"></image>
			</view>
		</view>


		<view class="content_xuan">
			<scroll-view  scroll-y="true" class="scroll-y scroll">
				<view id="demo1" class="scroll-view-item uni-bg-red" @click="info">
					<uni-swipe-action>
						<uni-swipe-action-item :options="options" @click="onClick" @change="change">
							<view class='cont'>
							<view class="box">
								<view class="contents">
									123
									<text class="yans">批发客户</text>
								</view>
								<view class="contents">
									拜访时间：当天
								</view>
								<view class="contents">
									计划内容：内容内容内容内容内容
								</view>
								<view class="box-con">
									<view class="box-text">拜访中</view>
								</view>
							</view>	
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>

				</view>
				<view id="demo2" class="scroll-view-item uni-bg-green">
					<uni-swipe-action>
						<uni-swipe-action-item :options="options" @click="onClick" @change="change">
							<view class='cont'>
							<view class="box">
								<view class="contents">
									123
									<text class="yans">批发客户</text>
								</view>
								<view class="contents">
									拜访时间：当天
								</view>
								<view class="contents">
									计划内容：内容内容内容内容内容
								</view>
								<view class="box-con">
									<view class="box-text">拜访中</view>
								</view>
							</view>	
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
				<view id="demo3" class="scroll-view-item uni-bg-blue">
					<uni-swipe-action>
						<uni-swipe-action-item :options="options" @click="onClick" @change="change">
							<view class='cont'>
							<view class="box">
								<view class="contents">
									123
									<text class="yans">批发客户</text>
								</view>
								<view class="contents">
									拜访时间：当天
								</view>
								<view class="contents">
									计划内容：内容内容内容内容内容
								</view>
								<view class="box-con">
									<view class="box-text">拜访中</view>
								</view>
							</view>	
							</view>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</view>
			</scroll-view>
		</view>



		<view class="btn">
			<span @click='Administration'>计划管理</span>
			<span @click='record'>拜访记录</span>
		</view>
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	import uniSwipeActionItem from '@/components/uni-swipe-action-item/uni-swipe-action-item.vue'
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			uniSwipeAction,
			uniSwipeActionItem,
			heaDers
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				title:'拜访计划',
				options: [ {
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				date: currentDate
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			onClick(e) {
				console.log('当前点击的是第' + e.index + '个按钮，点击内容是' + e.content.text)
			},
			change(open) {
				console.log('当前开启状态：' + open)
			},

			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				console.log(e.target.value)
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			Administration(){
				uni.navigateTo({
					url:'./Administration/Administration'
				})
			},
			info(){
				uni.navigateTo({
					url:'chek/chek'
				})
			},
			record(){
				uni.navigateTo({
					url:'record/record'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {

				width: 22rpx;
			}

			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}

			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}

		.seach {
			width: 100%;
			box-sizing: border-box;
			padding: 10rpx 30rpx;
			height: 88rpx;
			position: relative;
			background-color: #fff;

			input {
				background-color: rgba(245, 245, 245, 1);
				padding-left: 50rpx;
				height: 64rpx;
				border-radius: 32px;
			}

			image {
				position: absolute;
				top: 35%;
				left: 5%;
				width: 32rpx;
			}
		}

		.btn {
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: rgba(35, 153, 246, 1);
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			span {
				flex: 1;
				text-align: center;
				border-right: 1rpx solid #fff;
				font-size: 28rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
				letter-spacing: 4rpx;
				display: inline-block;
				height: 100%;
				line-height: 88rpx;
			}

			span:last-child {
				border-right: none;
			}
		}

		.uni-list-cell-db {
			display: flex;
			color: rgba(33, 33, 33, 1);
			align-items: center;
			justify-content: center;
			padding: 20rpx 0;
			font-size: 35rpx;
			color:#C0C0C0;
			image {
				width: 20rpx;

			}

			picker {
				margin: 0 10rpx;
			}

			.rights {
				display: flex;
				align-items: center;

				image {
					margin-left: 8rpx;
				}

				.sjian {
					width: 35rpx;
				}
			}
		}

		.content_xuan {
			width: 100%;
			height: 71%;
			box-sizing: border-box;
			overflow: hidden;

			.scroll {
	
				.scroll-view-item {
					width: 100%;
					height: 180rpx;
					background-color: #fff;
					margin-bottom: 20rpx;
					
					box-sizing: border-box;
					background-color: red;
					.cont {
						width: 100%;
						height:180rpx;
						
						.box {
								width: 100%;
								height: 100%;
								background: white;
								-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
								-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
								box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
								position: relative;
								z-index: 90;
								.contents {
									margin-left: 10rpx;
									line-height: 60rpx;
									.yans {
										display: inline-block;
										width:100rpx;
										height:24rpx;
										background:rgba(208,233,250,1);
										border:1rpx solid rgba(37,147,233,0.5);
										text-align: center;
										font-size:20rpx;
										font-family:PingFang SC;
										font-weight:400;
										line-height:26rpx;
										text-align: center;
										color:rgba(37,147,233,1);
										margin-left: 10rpx;
										padding: 6rpx;
									}
								}
							}
						
							.box .box-con {
								width: 100px;
								height: 88px;
								overflow: hidden;
								position: absolute;
								top: -3px;
								right: -3px;
							}
						
							.box .box-text {
								color: white;
								text-align: center;
								-webkit-transform: rotate(45deg);
								-moz-transform: rotate(60deg);
								-ms-transform: rotate(45deg);
								-o-transform: rotate(45deg);
								position: relative;
								padding: 2px 0;
								left: 22px;
								top: 15px;
								background-color: rgba(255, 169, 67, 1);
								background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 169, 67, 1)), to(rgba(255, 169, 67, 1)));
								background-image: -webkit-linear-gradient(top, rgba(255, 169, 67, 1), rgba(255, 169, 67, 1));
								background-image: -moz-linear-gradient(top, rgba(255, 169, 67, 1), rgba(255, 169, 67, 1));
								background-image: -ms-linear-gradient(top, rgba(255, 169, 67, 1), rgba(255, 169, 67, 1));
								background-image: -o-linear-gradient(top, rgba(255, 169, 67, 1), rgba(255, 169, 67, 1));
								-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
								-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
								box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
							}
						
							.box .box-text:before,
							.box-text:after {
								content: "";
								position: absolute;
								bottom: -3px;
							}
						
							.box .box-text:before {
								left: 0;
							}
						
							.box .box-text:after {
								right: 0;
							}
						}
					}
					

				.scroll-view-item:last-child {
					margin-bottom: 0rpx;
				}
			}
		}
	}
</style>
